<template>
  <div class="common-layout" >
    <el-container >
      <el-header>
        <div class="header-content">
          <img  style="height: 150px;width: 150px" src="@/logo.png" alt="Logo" class="header-logo">
          <div>
            <img src="@/img.png" alt="Logo-text" style="height: 45px;margin-top: 30px" class="header-logotext">
            <p STYLE="width: 1000px;margin-left: 10px;margin-top: 10px">NEUSOFT&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SMART&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;COMMUNITY</p>
          </div>
          <div class="avatar" >
            <el-avatar :size="55" :icon="UserFilled" />
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside class="aside" >
          <el-menu router default-active="1">
            <el-menu-item style="height: 100px" index="goods-management" class="first">
              <el-icon><location /></el-icon>
              <span>商品管理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="area-management">
              <el-icon><icon-menu /></el-icon>
              <span>服务区管理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="shop-management">
              <el-icon><document /></el-icon>
              <span>门店管理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="order-management">
              <el-icon><setting /></el-icon>
              <span>订单管理</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="rank-management">
              <el-icon><setting /></el-icon>
              <span>商品销售排行</span>
            </el-menu-item>
            <el-menu-item style="height: 100px"index="visitorrank-management">
              <el-icon><setting /></el-icon>
              <span>商品访客排行</span>
            </el-menu-item>

          </el-menu>
        </el-aside>

        <el-main class="main">
          <div class="m-4">
            <h2 style="margin-left: 80px;margin-top: 40px">商品销售排行</h2>
            <el-divider></el-divider>
            <el-button  class="button1" type="button">添加商品</el-button>
            <el-button  class="button2" type="button">删除商品</el-button>
          </div>
  <div ref="chartRef" :style="{width: '100%', height: '400px'}"></div>

          <el-table :data="tableData" style="width: 100%;margin-top: 30px;margin-left: 80px">
            <el-table-column fixed prop="img" label="商品图片" width="200" >

              <template #default="scope">
                <el-image :src="scope.row.imgUrl" style="width:100px ;"></el-image>
                <div style="text-align: center;width: 100px;">图片</div>
              </template>
            </el-table-column>
            <el-table-column fixed prop="date" label="日期" width="150" />
            <el-table-column  prop="id" label="订单编号" width="150" />
            <el-table-column  prop="name" label="商品名称" width="150" />
            <el-table-column  prop="price" label="订单金额" width="150" />
            <el-table-column  prop="introduction" label="订单简介" width="300" />
            <el-table-column  fixed="right" label="操作" width="100">
              <template #default>
                <el-button link type="primary" size="small" @click="handleClick">
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-main>
        </el-container>
    </el-container>
  </div>



</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import {Document, Location, Setting,Menu as IconMenu,UserFilled} from "@element-plus/icons-vue";

const chartRef = ref(null);

onMounted(() => {
  initChart();
});
const tableData = [
  {
    imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
    date: '2016-05-03',
    id: '2016-05-03',
    name: 'Tom',
    price: 'California',
    introduction: 'No. 189, Grove St, Los Angeles',
  },
  {
    imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
    date: '2016-05-03',
    id: '2016-05-03',
    name: 'Tom',
    price: 'California',
    introduction: 'No. 189, Grove St, Los Angeles',
  },
  {
    imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
    date: '2016-05-03',
    id: '2016-05-03',
    name: 'Tom',
    price: 'California',
    introduction: 'No. 189, Grove St, Los Angeles',
  },
  {
    imgUrl: "https://ts2.cn.mm.bing.net/th?id=OIP-C.SQmqQt18WUcWYyuX8fGGGAHaE8&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=2&pid=3.1&rm=2",
    date: '2016-05-03',
    id: '2016-05-03',
    name: 'Tom',
    price: 'California',
    introduction: 'No. 189, Grove St, Los Angeles',
  },
]
const initChart = () => {
  const option = {
    dataset: [
      {
        dimensions: ['name', 'age', 'profession', 'score', 'date'],
        source: [
          ['Hannah Krause', 41, 'Engineer', 314, '2011-02-12'],
          ['Zhao Qian', 20, 'Teacher', 351, '2011-03-01'],
          ['Jasmin Krause ', 52, 'Musician', 287, '2011-02-14'],
          ['Li Lei', 37, 'Teacher', 219, '2011-02-18'],
          ['Karle Neumann', 25, 'Engineer', 253, '2011-04-02'],
          ['Adrian Groß', 19, 'Teacher', '-', '2011-01-16'],
          ['Mia Neumann', 71, 'Engineer', 165, '2011-03-19'],
          ['Böhm Fuchs', 36, 'Musician', 318, '2011-02-24'],
          ['Han Meimei', 67, 'Engineer', 366, '2011-03-12']
        ]
      },
      {
        transform: {
          type: 'sort',
          config: { dimension: 'score', order: 'desc' }
        }
      }
    ],
    xAxis: {
      type: 'category',
      axisLabel: { interval: 0, rotate: 30 }
    },
    yAxis: {},
    series: {
      type: 'bar',
      encode: { x: 'name', y: 'score' },
      datasetIndex: 1
    }
  };

  const chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption(option);
};
</script>

<style scoped>
.avatar{
  margin-left: 400px;
}
.header-content {
  display: flex;
  align-items: center;
  border-width: 1px;
  border-bottom-style: groove;
  border-bottom-color:#cccccc;
  position: absolute;
  left: 10%; /* 图片和标题距离左侧20% */
  width: 100%; /* 可根据实际情况调整，确保内容不会溢出 */
}
.header-logo {
  float: left;
  width: 100px;
  height: auto;
  margin-top: 10px;
  margin-left: -175px;
}
.header-logotext{
  margin-top: 40px;
}
.aside {
   position: absolute;
   top: 160px;
   left: 0;
   bottom: 0;
   width: 200px;
   height: calc(100% - 60px);
   border: 1px solid #ccc;
 }
span {
  font-size: 18px;
}
.first{
  margin-top: 0px;
}
.main {
  flex: 1; /* main占据剩余空间 */
  border-radius: 4px;
  position: absolute;
  top: 150px;
  left: 200px;
  right: 0;
  bottom: 0;
}
.el-header {
  flex: 0 0 15%; /* header占据20%高度，且不缩放 */
  line-height: 1; /* 重置line-height，避免继承影响 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 调整为两端对齐，以便在两侧放置元素 */
  padding: 0px 20px; /* 添加内边距以防止内容贴近边缘 */
}
.button1 {
  width: 80px;
  height: 30px;
  color: white;
  background: dodgerblue;
  margin-left: 1100px;
}
.button2 {
  width: 80px;
  height: 30px;
  margin-right: 30px; /* 根据需要调整间距 */
  color: white;
  background:red;
}
</style>